<template>
  <transition name="slide" class="singerdetail" appear>
    <musiclist  :title = "title" :bgImg = "bgImg" :songs = "songs"></musiclist>
  </transition>     
</template>
<script>
import Musiclist from 'components/music_list/musiclist.vue'
import {mapGetters} from "vuex"
import {getSingerDetail} from "api/singer.js"
import {createsong,processSongsUrl} from "commom/js/song.js"

export default {
  data(){
    return{
      songs:[]
    }
  },
  created(){
    this._getDetail();
  },
  computed:{
    title(){
      return this.singer.name
    },
    bgImg(){
      return this.singer.avatar
    },
    ...mapGetters([
      'singer'
    ]),
  },
  methods:{
    _getDetail(){
      if(!this.singer.id){
        this.$router.push("/singer");
        return;
      }
      getSingerDetail(this.singer.id).then((res)=>{
        processSongsUrl(this._normalizeSongs(res.data.list)).then((songs) => {
          this.songs = songs
        })
      })
    },
    _normalizeSongs(list){
      let ret = [];
      list.forEach((item,index)=>{
        let {musicData} = item
        if(musicData.pay.payplay === 0){
          ret.push(createsong(musicData))
        }
      })
      return ret;
    }
  },
  components:{
    Musiclist
  },
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter,.slide-leave-to
    transform :translate3d(100%,0,0);
  .slide-enter-active,.slide-leave-active
    transition: all .3s;
</style>
